<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回忆 | 小糯米一周岁生日</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/memories.css">
</head>
<body class="bg-gradient-blue">
    <!-- 导航栏 -->
    <div class="container">
        <nav class="nav">
            <a href="welcome.html" class="nav-link">欢迎</a>
            <a href="memories.html" class="nav-link active">回忆</a>
            <a href="invitation.html" class="nav-link">邀请函</a>
            <a href="wishes.html" class="nav-link">祝福墙</a>
            <a href="surprise.html" class="nav-link">惊喜</a>
        </nav>
    </div>
    
    <!-- 主内容 -->
    <div class="container">
        <!-- 视频回忆区 -->
        <section class="memories-header">
            <h2 class="section-title text-primary">
                <i class="fa fa-video-camera"></i> 成长视频
            </h2>
            <p class="section-description">记录小糯米成长的珍贵视频片段，每一刻都值得珍藏</p>
        </section>
        
        <div class="cinema-container">
            <!-- 聚光灯效果 -->
            <div class="spotlight"></div>
            
            <!-- 爆米花容器 -->
            <div id="popcorn-container"></div>
            
            <!-- 视频播放器 -->
            <div class="video-player">
                <video id="main-video" autoplay loop muted playsinline>
                    您的浏览器不支持视频播放
                </video>
            </div>
            
            <div class="video-info">
                <h3 class="video-title" id="video-title"></h3>
                <p class="video-description" id="video-description"></p>
            </div>
            
            <!-- 视频选择器 -->
            <div class="video-selector" id="video-selector">
                <!-- 视频票将通过JS动态生成 -->
            </div>
        </div>
        
        <!-- 照片墙 -->
        <section class="photos-section">
            <h2 class="section-title text-secondary">
                <i class="fa fa-camera"></i> 精彩瞬间
            </h2>
            <p class="section-description">每一张照片都记录着小糯米的成长足迹和欢乐时光</p>
            
            <div class="photos-grid" id="photos-grid">
                <!-- 照片将通过JS动态生成 -->
            </div>
        </section>
    </div>
    
    <!-- 照片查看器 -->
    <div class="photo-viewer" id="photo-viewer">
        <div class="viewer-content">
            <div class="viewer-close" id="viewer-close">
                <i class="fa fa-times"></i>
            </div>
            <img src="" alt="" class="viewer-image" id="viewer-image">
            <div class="viewer-caption">
                <h3 id="viewer-title"></h3>
                <p id="viewer-description"></p>
            </div>
        </div>
    </div>
    
    <script src="js/common.js"></script>
    <script src="js/memories.js"></script>
</body>
</html>
